<script type="text/javascript" src="/js/jquery/mousewheel.js"></script>
<script type="text/javascript">
$(function(){
	var dd = [], i=0;
	for(i=0; i<10; i++){
		var a = {
			code: 'tab' + i,
			title: 'Subject ' + i,
			closeable: i>0,
			el: 'Content of Tab' + i // You can put anything here
		};
		dd.push(a);
	}
	var tabs = $('.tabs');
	tabs.mac('tabs', {
		tabWidth: 80, //Use fix width
		items: dd,
		onCloseTab: function(me, c, a){
			tnCbx.find('[value=' + c + ']').remove();
			return true;
		}
	}).selectFirst();
	var thd = tabs.children('.head'), thm = thd.children('.main');
	thd.mousewheel(function(e, delta, deltaX, deltaY){
		thm.scrollLeft(thm.scrollLeft() - deltaY * 40);
		return false;
	});
	//extra control
	var tnCbx = $('#tabNoCbx').change(function(){
		tabs.select($(this).val());
	});

	function options(self, cfg) {
		self.empty();
		$.each(cfg.data, function(i, n) {
			var k = cfg.keyField, v = cfg.displayField
				, a = $('<option></option>').appendTo(self);
			a.attr('value', (k? n[k]:i));
			a.append(cfg.render? cfg.render(n):(v? n[v]:n));
		});
		return self;
	};
	options(tnCbx, {
		data: dd,
		keyField: 'code',
		render: function(r){
			return 'Select Tab #' + r.code;
		}
	});
	var atBtn = $('#addTabBtn').click(function(){
		var a = tabs.addTab({
			code: 'tab' + i,
			title: 'Subject ' + i,
			closeable: i>0,
			el: 'Content of Tab' + i // You can put anything here
		});
		tabs.select('tab' + i);
		tnCbx.append('<option value="tab'
			+ i + '">Select Tab #tab' + i + '</option>');
		i++;
	});
});
</script>
<div class="toolbar">
	<div class="item"><select id='tabNoCbx' style="margin: 2px;"></select></div>
	<div class="sqrt"></div>
	<div class="item button" id="addTabBtn">Add Tab</div>
</div>
<div class="clear"></div>
<div class="tabs" style="height: 380px; margin: 4px;"></div>